<template>
	<sw-common-frame :loading="loading">
		<el-form slot="query" size="small" inline>
			<el-form-item>
				<el-input v-model="queryData.name" clearable placeholder="文件名称" style="width: 180px"></el-input>
			</el-form-item>
			<el-form-item>
				<el-select v-model="queryData.isFinish" clearable placeholder="选择转码状态" style="width: 136px">
					<el-option label="已完成" value="1"></el-option>
					<el-option label="进行中" value="2"></el-option>
					<el-option label="转码失败" value="3"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="queryData.type" clearable placeholder="选择转码类型" style="width: 136px">
					<el-option label="PDF转化" value="1"></el-option>
					<el-option label="音频转化" value="3"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="queryTableData">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table slot="table" size="medium" :data="tableData" height="100%">
			<el-table-column prop="name" label="文件名称" min-width="240"></el-table-column>
			<el-table-column label="转码状态" width="120" :formatter="returnTaskStatus"></el-table-column>
			<el-table-column prop="createName" label="创建人" min-width="100"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
			<el-table-column label="操作" width="80">
				<template slot-scope="{ row }">
					<el-button size="medium" type="text" @click="handleLookParams(row)">转码参数</el-button>
				</template>
			</el-table-column>
		</el-table>
		<template slot="page">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTaskData"></sw-pagination>
		</template>
		<el-dialog title="任务数据" :visible.sync="dialogVisible" width="720px">
			<el-descriptions class="task_checked_data" :column="1" border>
				<el-descriptions-item label="任务描述">{{ checkedTaskData.content }}</el-descriptions-item>
				<el-descriptions-item label="任务参数">{{ checkedTaskData.mqData }}</el-descriptions-item>
			</el-descriptions>
		</el-dialog>
	</sw-common-frame>
</template>

<script>
import systemMixins from '@/views/common/systemMixins';
import { getTaskListData } from '@/api/task/tbSysMqRecord';
export default {
	mixins: [systemMixins],
	data() {
		return {
			dialogVisible: false,
			checkedTaskData: {}
		};
	},
	methods: {
		//切换任务列表
		handleTabsClick() {
			this.queryData.page = 1;
			this.queryTaskData();
		},

		//获取任务列表
		async getTableData() {
			let params = this.formatRequestParams();
			let result = await getTaskListData(params).then((res) => res.data);
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = result.data || [];
			}
		},

		//格式化请求参数
		formatRequestParams() {
			let params = { ...this.queryData };
			if (params.date) {
				params['startTime'] = this.$moment(params.date[0]).valueOf();
				params['endTime'] = this.$moment(params.date[1]).valueOf();
			}
			delete params.date;
			return params;
		},

		//格式化任务状态
		returnTaskStatus(data) {
			let obj = {};
			if (data.isFinish === '1') {
				obj = { type: 'success', text: '已完成' };
			} else if (data.isFinish === '2') {
				obj = { type: 'warning', text: '等待中' };
			} else if (data.isFinish === '3') {
				obj = { type: 'danger', text: '转码失败' };
			}
			return this.$createElement('ElTag', { attrs: { type: obj.type, size: 'medium' } }, obj.text);
		},

		//查看任务参数
		handleLookParams(data) {
			this.dialogVisible = true;
			this.checkedTaskData = { ...data };
		}
	}
};
</script>

<style lang="scss" scoped>
.task_checked_data::v-deep {
	width: 100%;

	.el-descriptions-item__label {
		width: 120px;
	}
}
</style>
